<template>
	<div class="login">
		<div class="forms">
			<div class="formrongqi">
				<div class="title">景顺长城</div>

				<el-input prefix-icon="el-icon-user-solid" type="text" v-model="user.userName" clearable placeholder="随便填" @keydown.enter="onSubmit" :disabled="user.loginDes"></el-input>

				<!-- 禁止浏览器记住密码 -->
				<el-input
					v-if="user.checked"
					prefix-icon="el-icon-lock"
					type="password"
					clearable
					placeholder="随便填"
					v-model="user.password"
					@keydown.enter="onSubmit"
					:disabled="user.loginDes"
				></el-input>

				<el-input
					v-if="!user.checked"
					prefix-icon="el-icon-lock"
					type="text"
					clearable
					class="noPassword"
					placeholder="随便填"
					v-model="user.password"
					@keydown.enter="onSubmit"
					:disabled="user.loginDes"
				></el-input>

				<div class="jizhumima">
					<el-checkbox v-model="user.checked" :disabled="user.loginDes" @change="rememberPwd()">记住密码</el-checkbox>
					<el-link type="primary" href="/web/weibo/home" :disabled="user.loginDes">忘记密码</el-link>
				</div>

				<el-button
					@click="onSubmit"
					@keydown.enter="onSubmit"
					v-loading="user.loading"
					element-loading-text="正在登陆"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
				>
					登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 陆
				</el-button>
				<div class="qitafangshi">
					<i class="iconfont icon-shouji"></i>
					<i class="iconfont icon-qq"></i>
					<i class="iconfont icon-weixin"></i>
					<i class="iconfont icon-zhifubao"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
	name: 'login',
	setup() {
		const router = useRouter()
		const store = useStore()
		const user = reactive({
			userName: '',
			password: '',
			loading: false,
			loginDes: false,
			checked: false,
		})

		const onSubmit = () => {
			//登陆
			if (!!!user.userName || !!!user.password) {
				ElMessage.error('请填写登录信息')
				return
			}
			user.loading = true
			user.loginDes = true
			setTimeout(() => {
				user.loading = false
				store
					.dispatch('user/login', user)
					.then((res) => {
						router.push({ path: '/' })
					})
					.catch((err) => {
						ElMessage({ type: 'error', message: err })
					})
			})
		}

		const rememberPwd = (num: any) => {
			//初始化是否记住密码状态
			if (!!num) {
				if (!!!localStorage.getItem('remember') || localStorage.getItem('remember') == 'noRemember') {
					user.checked = false
				} else {
					user.checked = true
				}
			} else {
				localStorage.setItem('remember', `${user.checked ? 'remember' : 'noRemember'}`)
			}
		}

		onMounted(() => {
			rememberPwd(1)
		})
		return {
			user,
			onSubmit,
			rememberPwd,
		}
	},
}
</script>

<style scoped lang="scss" src='./index.scss'>
</style>
